$(function () {
  // 思路:先获取数据 然后进行两个插件的初始化 这样拿到的就是最新的数据
  // 进行回显
  // 然后操作就和发布文章一样
  /*
      回显步骤:
          1.初始化文本插件
          2.将图片路径赋值给src
          3.初始化图片插件
          4.获取发布状态 添加选项 
          5.表单赋值 layui.form.val('表单元素',数据);
  */
  /*
      更新步骤即发布文章步骤:
          1.没有初始化的插件初始化
          2.添加一个上传文件的按钮 让其点击选择封面的按钮时 自动点击上传文件的按钮
          3.监听文件的改变 判断是否选择文件 将文件显示在页面上
          4.改变状态 定义一个全局变量值为已发布 如果草稿点击让变量改成草稿
          5.收集数据 FormData()阻止默认行为 将发布状态添加进FormData 将画布上的内容转换成文件类型 在画布回调里传入参数代表文件 在回调里进行添加数据 此时数据收集完毕发送给服务器即调用发布数据的函数
          6.发布数据 完成时强制跳转页面 到文章list页面上
  */

  // 回显
 
  var data = JSON.parse(localStorage.getItem('editData'))[0];

  // 将图片路径赋值给image
  var src = "http://localhost" + data.cover_img;
  console.log(src);
  var $image = $('#image')

   $image.attr('src', src)
  // 1. 初始化图片裁剪器

  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }

  // 3. 初始化裁剪区域
  $image.cropper(options)

  // layui.form.render();
  // 拿到状态的数据 当有选着时才会进行赋值 不然不会进行显示
  $.ajax({
    type: "get",
    url: "/my/article/cates",
    success: function (res) {
      if (res.status != 0) return layui.layer.msg(res.message);
      layui.layer.msg(res.message);
      var htmlstr = template('tpl-cate', res);
      $('[name=cate_id]').html(htmlstr);
      layui.form.render();
      // 文本初始化
      initEditor();
      // 当我们有状态时进行选着 form-edit 必须有一个from属性lay-filter
      layui.form.val('form-edit', data);
    }
  });





  // 更新发布
  // 1.图片处理点击选着封面让filter自动点击一下
  $('#btnChooseImage').on('click', function () {
    $('#coverFile').click()
  });
  // 2.  监听上传文件按钮的改变 用插件中的图片裁剪处理图片
  $('#coverFile').on('change', function (e) {
    var files = e.target.files;
    // 判断有没有tupian
    if (files.length == 0) {
      return;
    }
    var file = e.target.files[0];
    var newImgURL = URL.createObjectURL(file);
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  });

  //  3. 改变状态
  var art_state = '已发布';
  $('#btnSave2').on('click', function () {
    art_state = '草稿';
  })

  // 4.  给from表单绑定submit事件
  $('#form-edit').on('submit', function (e) {
    e.preventDefault();
    // console.log(11);
    // 收集数据 用formData快速收集数据 但是formData只能用用提交数据 post
    var fd = new FormData($(this)[0]);
    // 将状态添加到fm里
    fd.append('state', art_state);
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // 5. 将文件对象，存储到 fd 中
        fd.append('cover_img', blob);
        publishArticle(fd);
        // console.dir(fd);
      })



  })

  function publishArticle(fd) {
    // 发送Ajax请求
    $.ajax({
      type: "post",
      url: "/my/article/edit",
      data: fd,
      // formData格式有两个参数
      contentType: false,
      processData: false,
      success: function (res) {
        // console.log(res);
        if (res.status != 0) return layui.layer.msg(res.message);
        layui.layer.msg(res.message);
        // 强制跳转页面
        location.href = '../../article/article-list.html';
      }
    });
  }
})